Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch
By Brett Nelson
()
About this ebook
Learn how to render lists of items without repeating your code structure and how to work with conditional rendering items and event handling. Containing all you need to know to get started with Vue.js, this book will take you through using build tools (transpile to ES5), creating custom components, state management, and routers.
With Getting to Know Vue.js, you'll see how to combine reusable code with custom components, allowing you to create snippets of reusable code to suit your specific business needs. You'll also explore how to use Single File Components and the Vue.js Command Line Interface (CLI) to build components in a single file and add in build tools as you see fit.
Getting started with a new Single Page Application (SPA) JavaScript framework can be an overwhelming task, but Vue.js makes this daunting task simple and easy to learn, allowing you to start implementing business needs with just a script reference to the library and the custom JavaScript required for your use case. Starting with a little reference and a handful of lines of custom JavaScript, you will have a complete Single Page Application before you know it.
What You'll Learn
- Examine Vue.js templating syntax
- Work with binding methods
- Manage the state of your app by comparing your options of building a data store
- Adapt the more robust options compatible with Vue.js
- Review different router options, including creating your own router, using the Vue-router and using Page.js.
Who This Book Is For
Software developers with an understanding of HTML, CSS and JavaScript; prior understanding of a Single Page Application framework would be useful but not essential.Related to Getting to Know Vue.js
Related ebooks
Practical Oracle JET: Developing Enterprise Applications in JavaScript Rating: 0 out of 5 stars0 ratingsCreating ASP.NET Core Web Applications: Proven Approaches to Application Design and Development Rating: 0 out of 5 stars0 ratingsVue on Rails: End-to-End Guide to Building Web Apps Using Vue.js and Rails Rating: 0 out of 5 stars0 ratingsBuilding Scalable Apps with Redis and Node.js Rating: 0 out of 5 stars0 ratingsReact and Libraries: Your Complete Guide to the React Ecosystem Rating: 0 out of 5 stars0 ratingsLearning Yii Testing Rating: 1 out of 5 stars1/5Deploying Node.js Rating: 5 out of 5 stars5/5Pro PHP 8 MVC: Model View Controller Architecture-Driven Application Development Rating: 0 out of 5 stars0 ratingsJump Start Vue.js Rating: 4 out of 5 stars4/5HTML5 for Flash Developers Rating: 5 out of 5 stars5/5Monetizing Machine Learning: Quickly Turn Python ML Ideas into Web Applications on the Serverless Cloud Rating: 0 out of 5 stars0 ratingsWeb Development with MongoDB and NodeJS - Second Edition Rating: 0 out of 5 stars0 ratingsVisual Studio Condensed: For Visual Studio 2013 Express, Professional, Premium and Ultimate Editions Rating: 0 out of 5 stars0 ratingsRedmine Plugin Extension and Development Rating: 0 out of 5 stars0 ratingsBuilding Progressive Web Applications with Vue.js: Reliable, Fast, and Engaging Apps with Vue.js Rating: 0 out of 5 stars0 ratingsHudson 3 Essentials Rating: 0 out of 5 stars0 ratingsTest-Driven iOS Development with Swift Rating: 5 out of 5 stars5/5.Net Framework and Programming in ASP.NET Rating: 0 out of 5 stars0 ratingsASP.NET 3.5 Application Architecture and Design Rating: 0 out of 5 stars0 ratingsGetting Started with Knockout.js for .NET Developers Rating: 0 out of 5 stars0 ratingsKnockoutJS Blueprints Rating: 0 out of 5 stars0 ratingsPro ASP.NET MVC 5 Rating: 3 out of 5 stars3/5Expert ASP.NET Web API 2 for MVC Developers Rating: 4 out of 5 stars4/5ASP.NET Core 3 and React: Hands-On full stack web development using ASP.NET Core, React, and TypeScript 3 Rating: 0 out of 5 stars0 ratingsWebSocket Essentials – Building Apps with HTML5 WebSockets Rating: 0 out of 5 stars0 ratingsIntroducing Play Framework: Java Web Application Development Rating: 0 out of 5 stars0 ratingsFoundation Gatsby Projects: Create Four Real Production Websites with Gatsby Rating: 0 out of 5 stars0 ratings
Internet & Web For You
Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsThe Gothic Novel Collection Rating: 5 out of 5 stars5/5No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5Get Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsSix Figure Blogging Blueprint Rating: 5 out of 5 stars5/5Coding For Dummies Rating: 5 out of 5 stars5/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5Podcasting For Dummies Rating: 4 out of 5 stars4/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5The Cyber Attack Survival Manual: Tools for Surviving Everything from Identity Theft to the Digital Apocalypse Rating: 0 out of 5 stars0 ratingsRemote/WebCam Notarization : Basic Understanding Rating: 3 out of 5 stars3/5Wireless Hacking 101 Rating: 4 out of 5 stars4/5C++ Learn in 24 Hours Rating: 0 out of 5 stars0 ratingsThe Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsThe Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Web Designer's Idea Book, Volume 4: Inspiration from the Best Web Design Trends, Themes and Styles Rating: 4 out of 5 stars4/5Mike Meyers' CompTIA Security+ Certification Guide, Third Edition (Exam SY0-601) Rating: 5 out of 5 stars5/5Six Figure Blogging In 3 Months Rating: 4 out of 5 stars4/5Python: Learn Python in 24 Hours Rating: 4 out of 5 stars4/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5
Reviews for Getting to Know Vue.js
0 ratings0 reviews
Book preview
Getting to Know Vue.js - Brett Nelson
© Brett Nelson 2018
Brett NelsonGetting to Know Vue.jshttps://doi.org/10.1007/978-1-4842-3781-6_1
1. Why Vue.js?
Brett Nelson¹
(1)
Eagan, Minnesota, USA
Getting started with a new JavaScript framework can be a difficult task to approach. To help with this, we will take a look at the value that Vue.js brings to development and create our first app with Vue.
The Value of Vue.js
Getting started creating a Single Page Application (SPA) can be a difficult task. There are a lot of choices that have to be made up front with most frameworks. Some frameworks make those choices for you when you decide to go with them. Others require you to make those choices. Either way, those choices probably need to be decided at the beginning of a project, since changing them later in the development process will incur a greater cost.
It’s a lot to process and decide, all before you do any real
work that can you can show to your boss/client/stakeholder that they will perceive as valuable. What’s a developer to do?
One option is to choose a preset way to build your SPA that someone else had some luck with or go with what is recommended by the framework creators.
Another option to is to go with a framework that lets you start small and make choices for your app as the need arises.
And you can do that with Vue.js.
Vue.js is called a progressive framework by its creators. This is because it allows you to start building your app with minimal effort as the core Vue.js library focuses only on the view layer. Over time as the requirements grow, you can adapt additional libraries for functionality.
The idea of adding features to the app you are creating over time doesn’t limit the use of more complex development tools. Need to add a router? No problem; use the Vue-Router, a third-party option, or roll your own (see Chapter 11). Looking to manage in memory state? You can use a Plain Old JavaScript Object, a store pattern, or the Vue.js specific Vuex (see Chapter 6). By now you get the idea.
This all probably makes Vue.js sound complicated, but it’s not.
In fact, one of the reasons that developers often say they choose Vue.js is because of how easy it is to get started¹,². With little overhead, a developer can get to work and produce results without the added complexity of other popular frameworks. And this ease of beginning doesn’t limit the complexity of the app you can build, as Vue.js can scale in complexity with your project’s requirements.
Our First Vue.js Instance
One of the best parts of using Vue.js is that it requires little overhead to get started. Add a script tag referencing the Content Delivery Network (CDN) for the library to your page and you are ready to get going!
Let’s take a quick look at what it requires to get started.
We will start with a pretty empty HTML file, shown in Listing 1-1.
en>
Listing 1-1
Empty HTML File
To take this empty HTML file to a working Vue.js app, we need to add three things:
An HTML element where we mount
our app
A
A
We will start with a place to mount the app. We will use a
We could add the Vue.js
All this adds up to the contents of the element shown in Listing 1-2.
Listing 1-2
The Structure of Our HTML Page
I’ve included comments in Listing 1-2 so it’s easier to identify the items we are talking about.
That’s all the setup we need before we create our first app. The next step is to add some template syntax to our app’s
{{ propertyName }}
Listing 1-3
The HTML Template for Our App
Now we just need to create the app.
In the empty
To tell our instance of Vue.js where to mount the options object, we pass in a property called el. The value for this will be the CSS selector. In our case, that is #app since we gave our
Note
If you want to know more about the el property of the Vue options, see Chapter 2’s section on Vue options.
To give it some data, we will use the data property of the options object. The data property will be an object that has a property of the same name as the property name we used in our template binding. This means that our property name will be the very original and thought-out propertyName. In this case, we will give it a string that we want to show on the page.
Our 1-4.
var app = new Vue({
el: '#app',
data: {
propertyName: 'Hello from Getting to Know Vue.js!'
}
});
Listing 1-4
Our First Vue App!
Now when we look at our page in a web browser, we should see something like Figure 1-1.
../images/466441_1_En_1_Chapter/466441_1_En_1_Fig1_HTML.jpgFigure 1-1
Our first Vue.js app in action
Congratulations, you made your first Vue.js app!
We’ll be taking a closer look at what we did and how to use it as the starting point later on.
Developer Tools
Before we get too far, I want to explain some tools that I mention later on.
Browser Dev Tools
Throughout the course of this book, we will periodically be using tools built into the web browsers, commonly referred to as dev tools. While they can give us insight into what is going on with our JavaScript application, we can get greater insight by using the Vue-DevTools.
The Vue-DevTools come in two flavors—browser extensions for Chrome and Firefox and a standalone Electron app.
Links to the most up-to-date versions can be found at https://github.com/vuejs/vue-devtools .
Browsersync
In Figure 1-1, the address that the browser was viewing was http://localhost:3000/. This means it was being served from a server at localhost port 3000. Since I didn’t deploy the index.html to a remote server or build a custom app to view it, I was able to use Browsersync for hosting the files locally. Unless otherwise noted, I will continue to use Browsersync ( https://www.browsersync.io/ ) for loading files during local development.
To install Browsersync, Node.js and NPM are required. The good news is that both are installed when you install Node.js. Node.js can be installed by following the directions at https://nodejs.org/ .
Once Node.js is installed, Browsersync can be installed for use anywhere on your computer by typing the command in Listing 1-5 at the command prompt.
npm install -g browser-sync
Listing 1-5
The Install Browsersync Command
To use Browsersync after it is installed, navigate to the directory that you want to serve files from in your command prompt and enter the command shown in Listing 1-6.
browser-sync -w
Listing 1-6
Starting Browsersync to Watch File Changes
The browser-sync portion of the command starts Browsersync. The -w is a flag that causes it to watch for file changes and reload the browser when a change is detected. This means we have to press refresh just a little less frequently.
When you run browser-sync -w at the command prompt, it should look somewhat like Figure 1-2.
../images/466441_1_En_1_Chapter/466441_1_En_1_Fig2_HTML.jpgFigure 1-2
Using Browsersync on the command line
During this process, Browsersync should open your default browser to the address it shows for local
. With Figure 1-2 that means Firefox opened to http://localhost:3002/ on my computer.
Summary
In this chapter, we looked at the value that Vue.js brings to developing a Single Page Application. We also built our first Vue app and looked at some tools that are useful when working with Vue.
Footnotes
1
State of Vue.js 2017 https://cdn2.hubspot.net/hubfs/1667658/State_of_vue/State%20of%20Vue.js%20report%202017%20by%20Monterail.pdf?t=1509106564387&utm_campaign=Vue.js&utm_source=hs_automation&utm_medium=email&utm_content=57726309&_hsenc=p2ANqtz-9Kq2JTU9inAkO5FNwcxKL65dVn9IRCqZ9P9OUeA8nqbyVTc4m0TL-I4FoKetfBkihubdO1E1rs9zR8xzvRNiBSo3ltGQ&_hsmi=57726309
2
Adding Vue.js to Your Technology Stack https://www.monterail.com/services/vuejs-development
© Brett Nelson 2018
Brett NelsonGetting to Know Vue.jshttps://doi.org/10.1007/978-1-4842-3781-6_2
2. The Basics
Brett Nelson¹
(1)
Eagan, Minnesota, USA
Before we can get too far into understanding Vue, we need to cover a few things. We start off by learning what options we have when creating an instance of Vue. After we have an understanding of what we can provide Vue to make it suit our needs, we look at how we can start binding it to HTML, with a look at the